import React, { PureComponent } from 'react'
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native'
import screen from '../../../../common/screen'
import { Title, ImagePrice, Description, SaleNum, Earn, Price } from '../../../../widget/Text'
import { BoxShadow, BorderShadow } from 'react-native-shadow';

type props = {
    infos: Array,//推荐数据
    OnPressMore: Function,//点击更多
    OnPressItem: Function,//点击商品
}


class NewProduct extends PureComponent<>{
    render() {


        //let info1 = this.props.infos[0]
        //let info2 = this.props.infos[1]
        //let info3 = this.props.infos[2]
        let [info1, info2, info3] = this.props.infos;
        return (
            this.props.infos.length > 0 ?
                <View>
                    <TouchableOpacity onPress={() => this.props.OnPressMore('1')}>
                        <Image source={require('../../../../img/home/recommend_NewProduct.png')} style={styles.icon} />
                    </TouchableOpacity>
                    <View flexDirection={'row'}>
                        {/*左侧的一个item*/}
                        <BoxShadow setting={rightshadow}>
                            <TouchableOpacity style={styles.rightItemView} onPress={() => this.props.OnPressItem(info2.id)}>
                                <Image style={styles.rightImage} resizeMode='contain' source={{ uri: info3.imageUrl, cache: 'force-cache' }} />
                                <View style={styles.rightContainer}>
                                    <Title marginRight={10} numberOfLines={1}>{info3.title}</Title>
                                    <Description>{info2.description}</Description>
                                    <ImagePrice>¥{info2.price}</ImagePrice>
                                </View>
                            </TouchableOpacity>
                        </BoxShadow>



                        {/*右侧的两个item*/}
                        <View>
                            {/*item1*/}
                            <BoxShadow setting={lefthadow1}>
                                <TouchableOpacity style={styles.leftItemView} onPress={() => this.props.OnPressItem(info1.id)}>
                                    <View style={styles.leftContainer}>
                                        <Title marginRight={10} numberOfLines={1}>{info1.title}</Title>
                                        <Description>{info1.Description}</Description>

                                        <View flex={1} />
                                        <View flexDirection={'row'}>
                                            <Image style={styles.memberPrice} resizeMode='contain' source={require('../../../../img/home/member_price.png')} />
                                            <Price>¥{info1.price}</Price>
                                        </View>
                                    </View>
                                    <Image style={styles.leftImage} resizeMode='contain' source={{ uri: info1.imageUrl, cache: 'force-cache' }} />
                                </TouchableOpacity>
                            </BoxShadow>
                            {/*item2*/}
                            <BoxShadow setting={lefthadow2}>
                            <TouchableOpacity style={styles.leftItemView} marginTop={4} onPress={() => this.props.OnPressItem(info2.id)}>

                                <View style={styles.leftContainer}>
                                    <Title marginRight={10} numberOfLines={1}>{info2.title}</Title>
                                    <Description>{info3.Description}</Description>
                                    <View flex={1} />
                                    <View flexDirection={'row'}>
                                        <Image style={styles.memberPrice} resizeMode='contain' source={require('../../../../img/home/member_price.png')} />
                                        <Price>¥{info2.price}</Price>
                                    </View>
                                </View>
                                <Image style={styles.leftImage} resizeMode='contain' source={{ uri: info2.imageUrl, cache: 'force-cache' }} />
                            </TouchableOpacity>
                            </BoxShadow>
                        </View>
                    </View>
                </View>
                : <View ></View>

        );
    }
}

//  {/*已买和收益*/}
//  <View flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-start'}>
//  <SaleNum>{info2.buyNum}人已买</SaleNum>
//  <Earn>赚{info2.earn}</Earn>
// </View>
const styles = StyleSheet.create({
    contain: {
        flexDirection: 'row',
    },
    leftContainer: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'flex-start',
        marginTop: 10,
        marginBottom: 10,
        marginLeft: screen.width * 0.039,
    },
    leftItemView: {
        flexDirection: 'row',
        position: "relative",
        width: screen.width * 0.55,
        height: screen.width * 0.23 - 2.5,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor:'#FFFFFF',
        // marginTop: 4,
        borderRadius: 6,
        overflow: 'hidden',
        //elevation: 2,
    },
    rightItemView: {
        position: "relative",
        width: screen.width * 0.389,
        height: screen.width * 0.46,
        justifyContent: 'center',
        alignItems: 'center',
        // marginTop: 7,
        // marginLeft: 8,
        // marginRight: 7,
        backgroundColor: '#fff',
        overflow: 'hidden',
        borderRadius: 6,
        // borderWidth:0.5,
        //  borderWidth: 1,
        // elevation: 2,
        // shadowColor: '#333',
        // shadowOffset: { width: 2, height: 2 },
    },
    leftImage: {
        width: screen.width * 0.194,
        height: screen.width * 0.194,
        marginRight: 5,
        marginLeft: 5,
    },
    rightImage: {
        width: screen.width * 0.162,
        height: screen.width * 0.162,
        marginTop: 12,
    },
    icon: {
        width: screen.width - 16,
        height: screen.width * 0.11,
        // marginTop: 10,
        marginLeft: 8,
        marginRight: 8,
        backgroundColor: 'white',
        resizeMode: 'contain',
    },
    memberPrice: {
        width: screen.width * 0.12,
        height: screen.width * 0.048,
        marginRight: 5,
    },
    rightContainer: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'center',
        margin: 20,
        position: 'relative',
        zIndex: 1,
    }
})
const rightshadow = {
    width: screen.width * 0.389,
    height: screen.width * 0.46,
    color: "#000000",
    border: 2,
    radius: 6,
    opacity: 0.25,
    x: 1,
    y: 2,
    style: {
        marginTop: 7,
        marginLeft: 8,
        marginRight: 7,
        marginBottom: 6,
    },
}

const lefthadow1 = {
    width: screen.width * 0.55,
    height: screen.width * 0.23 - 2.5,
    color: "#000000",
    border: 2,
    radius: 6,
    opacity: 0.25,
    x: 1,
    y: 2,
    style: {
        marginTop: 7,
        marginRight: 9,
       // marginBottom: 6,
    },
}
const lefthadow2 = {
    width: screen.width * 0.55,
    height: screen.width * 0.23 - 2.5,
    color: "#000000",
    border: 2,
    radius: 6,
    opacity: 0.25,
    x: 1,
    y: 2,
    style: {
        marginTop: 4,
        marginRight: 9,
        marginBottom: 6,
    },
}
export default NewProduct